<template>
	<div class="upload-image-container">
		<el-upload :auto-upload="true" :before-upload="beforeUpload" :http-request="onUpload" :show-file-list="false" accept="image/*" drag>
			<el-image v-if="imageSrc" :src="imageSrc" fit="cover" lazy class="thumbnail-image">
				<template #placeholder>
					<ImageLoading />
				</template>
			</el-image>
			<el-icon v-else size="36">
				<Plus />
			</el-icon>
		</el-upload>
		<el-button v-show="imageSrc" link type="primary" @click="onRemoveImage"> 删除图片</el-button>
	</div>
</template>

<script lang="ts" setup>
import { Plus } from '@element-plus/icons-vue';
import { ElMessage, UploadRawFile, UploadRequestOptions } from 'element-plus';
import { onMounted, ref } from 'vue';
import { SystemEnum } from '@/enums/upload';
import { fetchUploadFile } from '@/api/system/system';
import ImageLoading from '@/components/Upload/ImageLoading.vue';

const props = defineProps({
	imageUrl: String,
	type: String,
});
const emits = defineEmits(['uploadCallback']);

const imageSrc = ref('');

/**
 * * 上传时
 * @param options
 */
const onUpload = async (options: UploadRequestOptions) => {
	// 整理参数
	const file = options.file;
	const type = props.type;
	const data = { file, type };

	// 上传文件并返回文件地址
	const result: any = await fetchUploadFile(data);
	imageSrc.value = result.data.url;
	emits('uploadCallback', result);
};

/**
 * * 删除图片
 */
const onRemoveImage = () => {
	// 清除图片地址和文件信息
	imageSrc.value = '';

	// 重新赋值
	const data: any = {
		url: '',
		filename: '',
		filepath: '',
		fileSize: 0,
		size: '',
		fileType: '',
	};
	emits('uploadCallback', data);
};

/**
 * * 上传之前
 */
const beforeUpload = (file: UploadRawFile) => {
	if (file.size > SystemEnum.IMAGE_SIZE) {
		ElMessage.error(SystemEnum.IMAGE_MESSAGE);
		return false;
	}
};

/**
 * * 初始化图片地址
 */
const handleInitiateImageSrc = () => {
	const value = props.imageUrl;
	if (value) imageSrc.value = value;
};

onMounted(() => {
	handleInitiateImageSrc();
});
</script>

<style lang="scss" scoped>
.upload-image-container {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}

.el-upload {
	width: 128px;
	height: 128px;
}

.el-upload-dragger {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	width: 100%;
}

.thumbnail-image {
	width: 100%;
	height: 100%;
	max-width: 128px;
	max-height: 128px;
	object-fit: cover;
}
</style>
